<template>
  <section class="permission-container">
    <el-card class="el-card-container">
      <div slot="header">
        <span>角色列表</span>
        <el-button
          style="float: right; padding: 3px 0"
          :loading="loadingRole"
          type="text"
          @click="onRefresh"
          >{{ loadingRoleName }}</el-button
        >
      </div>
      <div
        v-for="role in roles"
        :key="role.id"
        @click="selRole(role.id)"
        :class="[`text`, `item`, { active: role.id == roleId }]"
      >
        {{ role.name }}
      </div>
    </el-card>
    <el-card class="grant-permission-box">
      <!-- 设置权限 -->
      <grant-permission
        ref="grantPermissionaaa"
        :visible.sync="hasSetPermission"
        :roleId="roleId"
        :showClose="false"
        :showFooter="false"
        drawerBodyStyle="padding:24px 48px 42px 24px;"
        :closeAfterSave="false"
      >
        <template #title>
          <div>
            <span style="font-size: 14px">权限列表</span>

            <el-button
              style="float: right; padding: 0; border: 0"
              :loading="loadingRole"
              type="text"
              @click="onSavePermission"
              >保存</el-button
            >
            <el-button
              style="float: right; padding: 0 10px 0 0; border: 0"
              :loading="loadingRole"
              type="text"
              @click="onRefreshPermission"
              >刷新</el-button
            >
          </div>
        </template>
      </grant-permission>
    </el-card>
  </section>
</template>

<script>
import { getRoles } from "@/api/role";
import GrantPermission from "@/components/GrantPermission";
export default {
  components: {
    GrantPermission,
  },
  data() {
    return {
      loadingSave: false,
      loadingSaveName: "保存",
      loadingRole: false,
      loadingRoleName: "刷新",
      roles: [],
      roleId: 1,
      hasSetPermission: true,
    };
  },
  mounted() {
    this.loadingRole = true;
    this.loadingRoleName = "加载中...";
    this.loadingSave = true;
    this.loadingSaveName = "加载中...";
  },
  created() {
    this.getRoles();
  },
  methods: {
    selRole(roleId) {
      this.roleId = roleId;
      this.$refs.grantPermissionaaa.getPermissions();
    },
    onRefresh() {
      this.getRoles();
      this.$refs.grantPermissionaaa.getPermissions();
    },
    getRoles() {
      getRoles({}).then((data) => {
        this.loadingRole = false;
        this.loadingRoleName = "刷新";

        this.roles = data;
        this.roleId = data[0].id;
      });
    },
    onRefreshPermission() {
      this.$refs.grantPermissionaaa.getPermissions();
    },
    onSavePermission() {
      this.$refs.grantPermissionaaa.onSave();
    },
  },
};
</script>
<style lang="scss" scoped>
.permission-container {
  height: 100%;
}
.el-card-container {
  width: 20%;
  margin-right: 10px;
}
.active {
  background: #ebf5ff;
}
.grant-permission-box {
  position: relative;
  height: 100%;
}
</style>
